import axios from "../untils/axios";
import { useState, useEffect } from "react";
import "../view/home.css"
import Childen from '../view/childen/childen'

function Home() {
    let [arr, setArr] = useState([]);
    let [number,setNumber] = useState(0)
    const FatherFn = (v)=>{
        if(v<0) return v =0;
        setNumber(number+v);
        console.log('666666'+number);
    }
     useEffect(() => {
        // 进行判断，否则会进行多次数据请求
        // if (arr.length !== 0) return;
        axios.get('/live', {
            params:{
                offset:number
            }
        }).then(res => {
            // console.log(res.data.data);
            setArr((arr = res.data.data.splice(0,8)))
            console.log(arr);
        })
    }, [number])


    // const div4 = <div>
    //         {   
    //             arr.map(item=>{
    //                 return <div key={item.room_id}>{item.room_id}</div>
    //             })
    //         }
    // </div>
    
    return (
        <div>
            <h2>斗鱼数据显示</h2>
            <div className="box">
                {
                    arr.map(item => {
                        return <div key={item.room_id} className="box1">
                            <div><img src={item.room_src} className="img"></img></div>
                            <div>{item.room_name}</div>
                            <div>
                                <img src={item.url}></img>
                             <span>{item.online}</span>
                            </div>
                        </div>
                    })
                }
                <Childen FatherFn={FatherFn}></Childen>
            </div>
        </div>
    )
}
export default Home;